<template>
  <div class="orders">
    <van-nav-bar
        title="商品订单"
        left-arrow
        @click-left="$router.push('/index')"
    />
    <van-search :placeholder="placeholder"
                v-model="input"
                show-action
                action-text="搜索"
                shape="round"
    ></van-search>

    <!-- tabbar -->
    <van-tabbar v-model="active">
      <van-tabbar-item to="/orders/allOrders">全部</van-tabbar-item>
      <van-tabbar-item to="/orders/pendingSend">代发货</van-tabbar-item>
      <van-tabbar-item to="/orders/pendingReceive">待收货</van-tabbar-item>
      <van-tabbar-item to="/orders/pendingComment">待评价</van-tabbar-item>
    </van-tabbar>

    <!-- 推荐用嵌套路由 -->
    <router-view></router-view>
    <!-- 也可以这么写 -->
    <!--<allOrders v-if="active===0"></allOrders>-->
    <!--<pendingSend v-if="active===1"></pendingSend>-->
    <!--<pendingReceive v-if="active===2"></pendingReceive>-->
    <!--<pendingComment v-if="active===3"></pendingComment>-->
  </div>
</template>

<script>
// import {GetOrdersList} from "@/request/api";
import allOrders from "@/components/allOrders/allOrders";
import pendingComment from "@/components/pendingComment";
import pendingReceive from "@/components/pendingReceive";
import pendingSend from "@/components/pendingSend";


export default {
  data() {
    return {
      placeholder: "请输入",
      input: ""
    }
  },
  computed: {
    active: {
      get() {
        return this.$route.meta.activeNum;
      },
      set() {

      }
    }
  },
  components: {
    allOrders,
    pendingComment,
    pendingReceive,
    pendingSend
  }
}
</script>

<style scoped lang="less">
.orders {
  font-size: 0.16rem;
}
.van-nav-bar {
  background-color: rgb(33,54,147);
  /deep/ i:before {
    color: white;
  }
}
/deep/ .van-tabbar--fixed{
  bottom: auto;
}

.van-tabbar-item {
  font-size: 18px;
}
</style>